PageActions.commands = {

    /**
     * Restores the object to its original state. Original state picked up from "nextAction"
     * @param {Object} elem
     */
    "windowed": {
        "action": function(elem){
            __logger__.log("Restoring ", elem, this.nextAction.data);
            $(elem).css(this.nextAction.data);
            this.nextAction = null;
        },
        "icon": "images/windowed.png",
        "tooltip": "Restore this to its original size"
    },
    /**
     * Converts the element into full screen and saves the original element data in "nextAction"
     * @param {Object} elem
     */
    "fullscreen": {
        "action": function(elem){
            this.nextAction = {
                "command": "windowed",
                "data": $.extend(this.getCSS(elem, ["position", "z-index", "float"]), $.extend({
                    "height": elem.height(),
                    "width": elem.width()
                }, elem.offset())),
                "elem": elem
            };
            __logger__.log("Going full screen", elem, this.nextAction.data);
            $(elem).css({
                "top": 0,
                "left": 0,
                "width": "100%",
                "height": "100%",
                "margin": 0,
                "padding": 0,
                "z-index": this.maxZIndex - 1
            }).show();
            window.scrollTo(0, 0);
            this.getHandler(elem).hide();
        },
        "icon": "images/fullscreen.png",
        "tooltip": "View this in full screen"
    },
    /**
     * Removes all shadows around the element
     * @param {Object} elem
     */
    "noshadow": {
        "action": function(elem){
            $("._flashplus_shadow").hide();
            this.nextAction = null;
        },
        "icon": "images/noshadow.png",
        "tooltip": "Remove dark blocks around this"
    },
    /**
     * Darkens the area around the object
     * @param {Object} elem
     */
    "shadow": {
        "action": function(elem){
            this.nextAction = {
                "command": "noshadow",
                "data": null,
                "elem": elem
            };
            $("._flashplus_shadow").show();
            var findOrCreate = function(c){
                var result = $("." + c);
                if (result.length === 0) {
                    $(document.body).append(result = $("<div/>").addClass(c).addClass("_flashplus_shadow"));
                }
                return $(result);
            };
            var dimensions = $.extend({
                "height": elem.height(),
                "width": elem.width()
            }, elem.offset());
            findOrCreate("_flashplus_shadow-left").css({
                "width": dimensions.left,
                "top": dimensions.top,
                "height": dimensions.height
            });
            
            findOrCreate("_flashplus_shadow-top").css({
                "height": dimensions.top,
            });
            
            findOrCreate("_flashplus_shadow-right").css({
                "left": dimensions.left + dimensions.width,
                "width": $(document).width() - dimensions.left - dimensions.width,
                "top": dimensions.top,
                "height": dimensions.height
            });
            
            findOrCreate("_flashplus_shadow-bottom").css({
                "top": dimensions.top + dimensions.height,
                "height": $(document).height() - dimensions.top - dimensions.height
            });
            this.getHandler(elem).hide();
        },
        "icon": "images/shadow.png",
        "tooltip": "Darken the areas around this"
    },
    /**
     * Removes the handler from object
     * @param {Object} elem
     */
    "removeHandler": {
        "action": function(elem){
            this.getHandler(elem).hide();
        },
        "icon": "images/flashplay.png",
        "tooltip": "Remove the FlashPlus Commands and see the Flash component"
    },
    
    /**
     * Draws a RED rectangle on the page to show the location of the object.
     * @param {Object} elem
     */
    "find": {
        "action": function(elem){
            $.scrollTo(elem, {
                "axis": "xy",
                "duration": 300,
                "onAfter": function(){
                    var handler = $("#element-finder");
                    if (handler.length === 0) {
                        handler = $("<div/>", {
                            "id": "element-finder"
                        }).appendTo(document.body);
                    }
                    $(handler).show().css({
                        "top": 0,
                        "left": "0",
                        "width": window.innerWidth,
                        "height": window.innerHeight,
                        "border": "SOLID 10px RED",
                        "position": "absolute",
                    });
                    var offset = $(elem).offset();
                    $(handler).animate({
                        "top": offset.top,
                        "left": offset.left,
                        "width": $(elem).width(),
                        "height": $(elem).height()
                    }, {
                        "duration": 1000,
                        "complete": function(){
                            $(handler).hide();
                        }
                    });
                }
            });
        },
        "icon": "images/find.png",
        "tooltip": "Locate this element on the page"
    },
    /**
     * Redirects the page to a possible place where this can be downloaded from.
     * @param {Object} elem
     */
    "download": {
        "action": function(elem){
            chrome.extension.sendRequest({
                "action": "openPage",
                "data": {
                    "url": (chrome.extension.getURL("html/download.html") + "?" + document.location.href)
                }
            });
        },
        "icon": "images/download.png",
        "tooltip": "Download video on this page"
    },
    
    /**
     * Removes the flash element from the page by hiding it.
     * @param {Object} elem
     */
    "toggleBlock": {
        "action": function(elem){
            var handler = this.getHandler(elem);
            __logger__.log("Toggle ", elem.attr("id"), handler.position());
            $(elem).toggle();
        },
        "icon": "images/flashblock.png",
        "tooltip": "Hide this"
    },
    
    /**
     * Adds the translucent layer and the icons on top of it.
     * @param {Object} elem
     */
    "addScreenShotActions": {
        "action": function(elem){
            var me = this;
            // Position the translucent layer properly - this is called the handler
            var handler = this.getHandler(elem).css(elem.offset()).css({
                "height": elem.height(),
                "width": elem.width(),
                "z-index": this.maxZIndex - 2
            });
            __logger__.log(handler.css("z-index"))
            handler.html("<div class = '_flashplus_handler-background'></div><div class = '_flashplus_handler-actions'></div>").show();
            
            // Add individual icons and initialize the actions on them.
            $(this.getCommandList("screenShot")).each(function(){
                var commandName = this;
                handler.find("div._flashplus_handler-actions").append($("<img/>", {
                    "src": chrome.extension.getURL(me.commands[commandName].icon),
                    "title": me.commands[commandName].tooltip,
                    "commandName": commandName,
                    "class": "_flashplus_handler-action"
                }));
            });
            handler.draggable("destroy").find("div._flashplus_handler-actions>img").bind("click", function(e){
                me.commands[$(this).attr("commandName")].action.call(me, $(elem));
            });
            
            // Adding a resizer       
            var resizeThumb = $("<div/>").addClass("_flashplus_handler-resize-thumb").appendTo(handler).css({
                "top": handler.height(),
                "left": handler.width()
            }).css("background-image", "url(" + chrome.extension.getURL("images/resize-thumb.png") + ")");
            
            var resizeEvent = function(event, ui){
                var position = $(this).position();
                handler.css({
                    "width": position.left,
                    "height": position.top
                });
                elem.css({
                    "width": position.left,
                    "height": position.top
                });
            }
            // Constrains the resizer to the top left of the element
            var constrainResizer = function(){
                var position = $(handler).offset();
                position.top += resizeThumb.height();
                position.left += resizeThumb.width();
                var max = function(a, b){
                    return (a > b) ? a : b;
                };
                resizeThumb.draggable({
                    "containment": [position.left, position.top, max($(document).width(), window.innerWidth), max($(document).height(), window.innerHeight)]
                });
            }
            resizeThumb.draggable({
                "drag": resizeEvent,
                "stop": resizeEvent
            });
            
            // Make the Handler draggable.
            handler.draggable({
                "drag": function(){
                    elem.css(handler.offset());
                },
                "stop": function(){
                    elem.css($(handler).offset());
                    constrainResizer();
                }
            });
        }
    },
    
    /**
     * Creates a new window and pops out the element on the new window
     * @param {Object} elem
     */
    "popout": {
        "action": function(elem){
            var newElem = elem.clone().wrap("<div>").parent();
            var code = ["document.body.innerHTML='", newElem.html().replace(/\'/g, "\\'"), "';"];
            code.push("function __styles__(){var x = document.body.childNodes[0];");
            var style = {
                "top": 0,
                "left": 0,
                "width": "100%",
                "height": "100%",
                "margin": 0,
                "padding": 0,
                "display": "block",
            };
            for (var x in style) {
                code.push("x.style." + x + "= '" + style[x] + "';");
            }
            code.push("}; __styles__(); window.setTimeout(__styles__,3000);");
            __logger__.log("Writing to the new window ", code.join(""));
            chrome.extension.sendRequest({
                "action": "popout",
                "data": {
                    "url": document.location.href,
                    "code": code.join("").replace(/\n/g, " ")
                }
            });
            delete newElem;
        },
        "icon": "images/popout.png",
        "tooltip": "Pop out this into a new window"
    },
}
